<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/include/taglib.jsp" %>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="decorator" content="default" />
<style type="text/css">

.commentList{

	border:2px solid;
	border-radius:15px;
}

</style>
</head>
<body>

	<div class="row">
		<div class="col-md-4 commentList">
			<ul id="commentList">
				
			</ul>
			<div id="comment-form-div">
				<form action="" id="comment-form">
					<input type="hidden" name="busitableKey" id="busitableKey"/>
					<input type="hidden" name="parentId"  id="parentId" />
					<input type="hidden" name="topId"  id="topId" />
					<textarea rows="3" cols="50" class="form-group input-sm" id="comment" name="comment" placeholder="我也说一句" ></textarea>
					<div>
						<div class="col-sm-7"></div>
						<div class="col-sm-5">
							<button type="button" id="comment-btn-close">取消</button>
							<button type="button"  id="comment-btn-save">评论</button>
						</div>
					</div>
				</form>
			</div>
			
		</div>
	</div>


		
<script >

var busitableKey = "${param.busitableKey}";
$(document).ready(function() {
	//为表单设置初始属性
	$("#busitableKey").val(busitableKey);
	
	//加载点击事件的相关评论
	initCommentList();
	
	//评论保存
	$("#comment-btn-save").on('click',function(){
		
		if($("#comment").text()==null||$("#comment").text()==""){
			$("#comment-form-div").css("display","none");//隐藏
			return;
		};
		Otod.ajax({
			url:ctx+"/pm/comment/save.do",
			data:$('#comment-form').serialize(),
			contentType: "application/x-www-form-urlencoded;",
			successFn:function(data){
				$("#comment").attr("placeholder","");
				$("#comment-form-div").css("display","none");//隐藏
				Otod.Msg.info(data.info);
				initCommentList();
			}
		});
		
	});
	
	var placeholder;
	
	$("#comment").on('click',function(){
		placeholder = $("#comment").attr("placeholder");
		$("#comment").attr("placeholder","");
	});
	
	$("#comment").on('blur',function(){
		$("#comment").attr("placeholder",placeholder);
	});
	
	//评论删除
	$('#commentList').on('click',".deleteComment",function(e){
		Otod.ajax({
			url:ctx+"/pm/comment/delete.do",
			data:$(this).attr('id'),
			successFn:function(data){
				initCommentList();
			}
		});
		
	});
	
	
	//关闭评论输入框
	$("#comment-btn-close").on('click',function(){
		$("#comment-form-div").css("display","none");//隐藏
	});
	
	//显示评论输入框，并为表单属性赋值
	$('#commentList').on('click',".replyComment",function(e){
		e.preventDefault();
		var parentId = $(this).attr('id');
		var topId = $(this).attr('topId');
		$("#parentId").val(parentId);
		$("#topId").val(topId == "" ? parentId : topId );
		$("#comment").attr("placeholder","回复："+$(this).attr("replyToEmp"));
		
		$("#comment-form-div").css("display","");//显示
		
	});
	
});



//初始化评论列表
function initCommentList(){
	Otod.ajax({
		url:ctx+"/pm/comment/getAllAboutComment.do",
		data:{busitableKey:busitableKey},
		contentType: "application/x-www-form-urlencoded;",
		successFn:function(data){
			var commentMt = $('#commentMt').html();
			Mustache.parse(commentMt);
			
			var rendered = Mustache.render(commentMt,{
				data: data,
				isMyselfCmt: function(){
					return this.createEmpNo == '<shiro:principal property="empNo"/>';
				}
			});
			$('#commentList').html(rendered);
		}
	});
}



</script>	

<!-- 评论显示板块 -->
<script id="commentMt" type="x-tmpl-mustache">

	{{#data}}					
	<li>
			&nbsp;<small style="color:silver;">{{createEmp}}</small>&nbsp;回复&nbsp;<small style="color:silver;">{{replyToEmp}}</small>
			&nbsp;：{{comment}}&nbsp;&nbsp;&nbsp;&nbsp;<span  class="replyComment" id="{{uuid}}" topId="{{topId}}" replyToEmp="{{createEmp}}">回复</span>
			{{#isMyselfCmt}}
			&nbsp;&nbsp;&nbsp;&nbsp;<span id="{{uuid}}" class="deleteComment" style="color:red">删除</span>
			{{/isMyselfCmt}}
			{{#childList}}	
				<ul>
					<li class="childStyle" type="circle" style="padding:0 0 0 10px;">
							&nbsp;<small style="color:silver;">{{createEmp}}</small>&nbsp;回复&nbsp;<small style="color:silver;">{{replyToEmp}}</small>
							&nbsp;：{{comment}}&nbsp;&nbsp;&nbsp;&nbsp;<span class="replyComment" id="{{uuid}}" topId="{{topId}}" replyToEmp="{{createEmp}}">回复</span>
							{{#isMyselfCmt}}
							&nbsp;&nbsp;&nbsp;&nbsp;<span id="{{uuid}}" class="deleteComment" style="color:red" >删除</span>
							{{/isMyselfCmt}}
					</li>
				</ul>
			{{/childList}}
			
	</li>
	{{/data}}
</script>
</body>

